<template>
    <view class="create-course">
		<view class="task-top">
			<view class="task-top-fixed">
				<view class="ac-list">
					<text class="ac-item" :class="{active: activeInx==inx}" v-for="(ac, inx) in activeList" :key="inx" @click="changeInx(inx)">{{ac}}</text>
				</view>
				<view class="task-top-line"></view>
			</view>
		</view>
		<view class="create-course-box">
			<view class="scroll-y" v-if="activeInx==0">
				<form @submit="formSubmit" @reset="formReset">
					<view class="module-title" style="margin-top: 0;padding-top: 0;">
						<text>课程模块</text>
						
						<view class="select-module">
							<uni-combox
								@changeItem="changeItem"
								ref="combox"
								class="select-filter"
								:candidates="moduleList"
								placeholder="请选择"
								:border="false"
								v-model="selectModName"
								@change="comboxChange"></uni-combox>
							
						</view>
					</view> 
					<view class="cou-item">
						<view class="list">
							<text v-for="(item, i) in cmZList" :key="i" @click="selectModId=item.id" :class="{active: selectModId==item.id}">{{item.name}}</text>
						</view>
					</view>
					<view class="cou-tag">
						<view class="module-title">
							<text>课程标签</text>
						</view>
						<view class="cou-input">
							<input name="labels" :value="moduleInfo.labels" @input="labelInput" placeholder-style="color:#999" maxlength="10" minlength="2" placeholder="请输入分号区分多个标签，例高一；数学" />
						</view>
					</view>
					<view class="cou-tag">
						<view class="module-title">
							<text>课程名称</text>
						</view>
						<view class="cou-input">
							<input name="name" :value="moduleInfo.name" @input="nameInput" placeholder-style="color:#999" maxlength="16" minlength="2" placeholder="请输入课程名称" />
						</view>
					</view>
					<view class="cou-tag">
						<view class="module-title">
							<text>授课老师</text>
						</view>
						<view class="cou-input">
							<input name="lecturerName" :value="moduleInfo.lecturerName" @input="lecturerNameInput" placeholder-style="color:#999" maxlength="16" minlength="2" placeholder="请输入授课老师" />
						</view>
					</view>
					<view class="cou-desc">
						<view class="module-title">
							<text>课程简介</text>
						</view>
						<view class="cou-input-desc">
							<textarea name="brief" :value="moduleInfo.brief" @input="briefInput" placeholder-style="color:#999" maxlength="300" minlength="10" placeholder="请输入课程简介（限300字）"/>
						</view>
					</view>
					<view class="cou-desc">
						<view class="module-title">
							<text>上传图片</text>
						</view>
						<view class="upload-img">
							<upload-btn
								:icon-info="{width: '180rpx', icon: moduleInfo.picture?api.xiaodeObsUrl+moduleInfo.picture:'/static/add.png'}"
								type="image"
								@chooseFile="chooseImage"
							></upload-btn>
							<!-- <image v-if="moduleInfo.picture" src="/static/add.png" mode="widthFix"></image> -->
							<text style="margin-left: 32rpx;">添加课程介绍图片</text>
						</view>
					</view>
					<view class="cou-desc">
						<view class="module-title">
							<text>创建大纲</text>
						</view>
						<view class="chapter-box" v-for="(item, inx) in chapterDivision" :key="inx">
							<!-- <view class="chapter-title" v-if="item.name">
								<text>{{item.name}}</text>
								<image src="/static/campus/del.png" mode="widthFix" @click="deleChapter(inx)"></image>
							</view> -->
							<view class="chapter-title">
								<input class="cou-name-input" style="font-weight: 600" :value="item.name" @input="val => {chapterInput(item, val)}" placeholder-style="color:#999" placeholder="请填写章节名称" />
								<image src="/static/campus/del.png" :style="{transform: `rotate(1?'180deg':'0')`}" mode="widthFix" @click="deleChapter(inx)"></image>
							</view>
							<view v-for="(data, i) in item.divisionDTOList" :key="i">
								<!-- <view class="class-hour" v-if="data.name">
									<text class="hour-title">{{data.name}}</text>
									<uni-icons type="minus" color="#999" @click="deleDivision(item.divisionDTOList, i)"></uni-icons>
								</view> -->
								<view class="class-hour">
									<input class="cou-name-input" style="font-size: 28rpx" :value="data.name" @input="(val)=>{divisionInput(data, val)}" placeholder-style="color:#999" maxlength="30" minlength="2" placeholder="请填写课时名称" />
									<uni-icons type="minus" color="#999" size="40rpx" @click="deleDivision(item.divisionDTOList, i)"></uni-icons>
								</view>
							</view>
							
							
							<view class="add-course" @click="addDivision(item.divisionDTOList)">
								<uni-icons type="plusempty"></uni-icons>
								<text>添加课时</text>
							</view>
						</view>
						<view class="add-chapter" @click="addChapter()">
							<text>添加章节</text>
						</view>
					</view>
					<view class="submit-box">
						<view class="fixed-box">
							<!-- <text class="cancel">取消</text> -->
							<button class="cancel" type="default" form-type="reset">取消</button>
							<button class="submit" form-type="submit">提交</button>
							<!-- <text class="submit" @click="formSubmit()">提交</text> -->
						</view>
					</view>
				</form>
			</view>
			<view class="scroll-y" v-else-if="activeInx==1">
				<course-record></course-record>
			</view>
		</view>
    </view>
</template>
<script>
import courseRecord from './course-record.vue'
import uploadBtn from '../student/components/select-upload-file.vue'
import graceChecker from '@/common/graceChecker.js'
export default {
	components: {
		courseRecord,
		uploadBtn
	},
    data() {
        return {
            activeInx: 0,
            activeList: ['创建课程', '开课记录'],
			cmaList: [],
			moduleList: {},
			selectModId: '',
			cmZList: [],
			selectModName: '',
			moduleInfo: {
				name: '',
				lecturerName: '',
				labels: '',
				brief: '',
				picture: '',
			},
			chapterDivision: [{name: "",divisionDTOList:[{"name":""}]}],
        }
    },
	mounted(){
		this.getCurriculumMod();
	},
	methods: {
		changeInx(inx){
			this.activeInx = inx
		},
		changeItem(val){
			if(!val){
				this.$refs.combox.onBlur()
			}
		},
		comboxChange(i){
			this.getCurriculumModSon(i)
		},
		labelInput(e){
			this.moduleInfo.labels = e.detail.value;
		},
		nameInput(e){
			this.moduleInfo.name = e.detail.value;
		},
		lecturerNameInput(e){
			this.moduleInfo.lecturerName = e.detail.value;
		},
		briefInput(e){
			this.moduleInfo.brief = e.detail.value;
		},
		// 老师创建课程
		formSubmit: function(e) {
			//定义表单规则
			var rule = [
				{name:"name", checkType : "string", checkRule:"2,16",  errorMsg:"课程名称应为2-16个字符"},
				{name:"lecturerName", checkType : "string", checkRule:"2,16", errorMsg:"授课老师应为2-16个字符"},
				{name:"labels", checkType : "string", checkRule:"2,10", errorMsg:"标签应为2-10个字符"},
				{name:"brief", checkType : "string", checkRule:"10,300", errorMsg:"课程简介应为10-300个字符"}
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
				this.createCurriculum()
			}else{
				this.utils.showToast(graceChecker.error)
			}
		},
		formReset: function(e) {
			this.moduleInfo.picture = ''
			this.chapterDivision = [{name: "",divisionDTOList:[{"name":""}]}]
		},
		createCurriculum(){
			const {labels, name, lecturerName, brief, picture} = this.moduleInfo;
			let msg = ''
			if(!this.selectModId){
				msg = '请选择课程类型'
			}
			if(msg){
				this.utils.showToast(msg)
				return
			}
			
			this.api.post('happy/createCurriculum', {
				modId: this.selectModId,
				name,
				lecturerName,
				labels: labels,
				brief,
				picture,
				chapterDivision: JSON.stringify(this.chapterDivision)
			}).then(res=>{
				if(res.data.state!='ok') return
				this.utils.showToast('提交成功')
				this.getCurriculumMod()
				this.changeInx(1)
			})
		},
		// 获取课程类型
		getCurriculumMod(){
			this.api.get('happy/getCurriculumModAll').then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.cmList;
				this.cmaList = list;
				for(let i=0; i<list.length; i++){
					let info = list[i]
					if(info.cmZList&&info.cmZList.length>0){
						this.moduleList[info.id] = info.name
					}
					
				}
				this.selectModName = Object.values(this.moduleList)[0]
				if(this.selectModName){
					this.getCurriculumModSon(Object.keys(this.moduleList)[0])
				}
				this.moduleInfo = {
					name: '',
					lecturerName: '',
					labels: '',
					brief: '',
					picture: '',
				}
				this.chapterDivision = [{name: "",divisionDTOList:[{"name":""}]}]
				
			})
		},
		// 获取对应课程分类的子类
		getCurriculumModSon(id){
			let info = this.cmaList.find(item => item.id == id);
			if(info){
				this.cmZList = info.cmZList
			}
		},
		
		// 添加章节
		chapterInput(item, e){
			item.name = e.detail.value
		},
		addChapter(){
			this.chapterDivision.push({name: "",divisionDTOList:[{"name":""}]})
			// this.api.post('happy/addChapter', {
			// 	// curriculumId
			// }).then(res=>{
			// 	if(res.data.state!='ok') return

			// })
		},
		// 删除章节
		deleChapter(i){
			this.chapterDivision.splice(i, 1)
		},
		// 添加课时
		addDivision(list){
			list.push({name: ''})
		},
		divisionInput(data, e){
			data.name = e.detail.value
		},
		// 删除课时
		deleDivision(item, i){
			item.splice(i, 1)
			return
			this.api.post('happy/deleDivision', {
				divisionId: id
			}).then(res=>{
				if(res.data.state!='ok') return

			})
		},
		chooseImage(type, list, sendList){
			this.moduleInfo.picture = sendList[0].path
            
			
		},
		
	}
}
</script>
<style lang="less" scoped>
    .create-course{
        // position: relative;
        // // z-index: 1;
    }
	.task-top{
		height: 76rpx;
	}
	.task-top-fixed{
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		top: calc(88rpx + 27px);
		left: 0;
		right: 0;
		/* #endif */
		height: 90rpx;
		z-index: 1;
	}
	.task-top-line{
		height: 36rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #fff;
	}
    .ac-list{
		margin-top: 43rpx;
        display: flex;
        align-items: center;
        padding: 0 32rpx;
        
    }
    .ac-item{
        width: 142rpx;
        text-align: center;
        color: #666;
        font-size: 28rpx;
        padding-bottom: 20rpx;
        &.active{
            color: #262E3F;
            font-weight: bold;
            background-image: url(~@/static/campus/line-bg.png);
            background-size: 45rpx 18rpx;
            background-repeat: no-repeat;
            background-position: center 26rpx;
        }
    }
	
	.create-course-box{
		background-color: #fff;
		overflow: hidden;
		border-radius: 32rpx 32rpx 0 0;
		padding: 48rpx 32rpx 0;
	}
	.select-module{
		margin-top: 24rpx;
		padding: 4rpx 0;
		background-color: #F9F9F9;
		border-radius: 8rpx;
	}
    // 学科网班
    .cou-item{
		margin-bottom: 26rpx;
		overflow: hidden;
	}
	.module-title{
		margin-top: 26rpx;
		font-size: 32rpx;
		line-height: 45rpx;
		padding: 24rpx 0;
		color: #262E3F;
        font-weight: bold;
	}
	.select-filter{
		font-weight: normal;
	}
	.list{
		margin-right: -24rpx;
		text{
			display: inline-block;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			min-width: 212rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #F9F9F9;
			color: #333;
			font-size: 30rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
		}
		.active{
			background: #E8F7F8;
			color: #28C2CD;
		}
	}
	.cou-tag{
		.input{
			
		}
	}
	.cou-input{
		display: flex;
		align-items: center;
		height: 72rpx;
		background-color: #F9F9F9;
		border-radius: 4rpx;
		padding-left: 30rpx;
		input{
			width: 100%;
			font-size: 30rpx;
		}
	}
	.cou-input-desc{
		padding: 14rpx 30rpx;
		background-color: #F9F9F9;
		textarea{
			width: 100%;
			font-size: 30rpx;
			height: 220rpx;
		}
	}
	.upload-img{
		display: flex;
		align-items: center;
		image{
			width: 180rpx;
			height: 180rpx;
			margin-right: 32rpx;
		}
	}
	.chapter-box{
		background-color: #F9F9F9;
		padding: 24rpx 32rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}
	.chapter-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #333333;
		image{
			width: 44rpx;
			height: 44rpx;
			
		}
	}
	.class-hour{
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		margin-left: 22rpx;
		color: #333333;
	}
	.add-course, .add-chapter{
		border: 1rpx solid #BFBFBF;
		
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.add-course{
		margin: 40rpx auto;
		width: 280rpx;
	}
	.cou-name-input{
		font-size: 30rpx;
		width: 90%;
	}
	.submit-box{
		height: 152rpx;
		margin-top: 32rpx;
		.fixed-box{
			margin: auto -32rpx 0;
			border-top: 1rpx solid #F0F0F0;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			background-color: #fff;
		}
		button{
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 20rpx;
			
		}
		uni-button[type=default]{
			background: transparent;
		}
		.cancel{
			border: 1rpx solid #BFBFBF;
		}
		.submit{
			background-color: #28C2CD;
			color: #fff;
		}
	}
</style>